<template>
  <div>
    <div class="top-user">
      <div class="avatar"><img src="../../../../assets/img/icon-avatar.png" alt="" width="100%"></div>
      <div class="name">
        <p class="nickname">{{ student }}</p>
        <p class="phone">{{ phone }}</p>
      </div>
    </div>
    <div class="check-list">
      <van-cell-group>
        <van-cell v-for="(item, index) in list" :key="index">
          <div class="left" slot="title">
            <p>{{ item.kcname }}</p>
            <p>{{ item.time }}</p>
          </div>
          <div class="status">{{ item.cstatus === 1 ? '已签到' : item.cstatus === 2 ? '请假' : '未签到' }}</div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import {datetimeFormat} from '@/utils'
export default {
  name: 'student-check-detail',
  data () {
    return {
      list: [],
      student: '',
      phone: '',
      id: ''
    }
  },
  methods: {
    getCheck () {
      let params = {
        student_id: this.id
      }
      api.teacherStudentVIPCheck({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            res.data.data.forEach(item => {
              item.time = datetimeFormat(new Date(Number(item.sktime) * 1000)).split(' ')[0].split('-').join('.')
            })
            this.list = res.data.data
          }
        }
      })
    }
  },
  created () {
    this.student = this.$route.query.name
    this.id = this.$route.query.id
    this.getCheck()
  }
}
</script>

<style scoped>
  .top-user{
    display: flex;
    height: 40px;
    padding: 10px;
    align-items: center;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    margin-bottom: 10px;
  }
  .top-user .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 16px;
  }
  .top-user .name{
    flex-grow: 1;
    flex-shrink: 1;
  }
  .top-user .name .nickname{
    color: #1A1D20;
    font-weight: bold;
    line-height: 30px;
  }
  .top-user .name .phone{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:22px;
    color:rgba(102,102,102,1);
  }
  .check-list .left{
    display: flex;
    color: #1E1E1E;
    justify-content: space-between;
    align-items: center;
  }
  .check-list .left p:nth-child(1){
    font-weight: bold;
  }
  .van-cell{
    padding: 20px 16px;
  }
</style>
